<template>
  <nav class="bg-white border-b border-gray-200 sticky top-0 z-50">
    <!-- 顶部导航条 -->
    <div class="container mx-auto px-2">
      <!-- 网站logo和主导航 -->
      <div class="flex items-center justify-between py-2">
        <!-- Logo -->
        <div class="flex items-center space-x-2">
          <img src="/favicon.ico" alt="财经新闻" class="w-8 h-8">
          <span class="text-xl font-bold text-primary">新浪财经</span>
        </div>
        
        <!-- 桌面导航 -->
        <div class="hidden md:flex space-x-1">
          <a href="#" class="nav-item nav-item-active">股票</a>
          <a href="#" class="nav-item">基金</a>
          <a href="#" class="nav-item">债券</a>
          <a href="#" class="nav-item">期货</a>
          <a href="#" class="nav-item">外汇</a>
          <a href="#" class="nav-item">黄金</a>
          <a href="#" class="nav-item">原油</a>
          <a href="#" class="nav-item">ESG</a>
        </div>
        
        <!-- 移动端菜单按钮 -->
        <button class="md:hidden p-2 text-gray-600" @click="toggleMenu">
          <i class="fa fa-bars text-xl"></i>
        </button>
      </div>
      
      <!-- 移动端导航菜单 -->
      <div v-if="mobileMenuOpen" class="md:hidden py-2 space-y-1">
        <a href="#" class="block nav-item nav-item-active">股票</a>
        <a href="#" class="block nav-item">基金</a>
        <a href="#" class="block nav-item">债券</a>
        <a href="#" class="block nav-item">期货</a>
        <a href="#" class="block nav-item">外汇</a>
        <a href="#" class="block nav-item">黄金</a>
        <a href="#" class="block nav-item">原油</a>
        <a href="#" class="block nav-item">ESG</a>
      </div>
      
      <!-- 搜索栏 -->
      <div class="py-2">
        <div class="flex">
          <select class="bg-gray-100 text-sm px-2 py-1 rounded-l-md border border-gray-300 focus:outline-none focus:ring-1 focus:ring-primary">
            <option>新闻</option>
            <option>行情</option>
            <option>资金流向</option>
            <option>研报</option>
          </select>
          <input 
            type="text" 
            placeholder="搜索财经信息..." 
            class="flex-1 px-3 py-1 text-sm border-t border-b border-gray-300 focus:outline-none focus:ring-1 focus:ring-primary"
          >
          <button class="bg-primary text-white px-3 py-1 rounded-r-md text-sm">
            搜索
          </button>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'NewsNavbar',
  data() {
    return {
      mobileMenuOpen: false
    }
  },
  methods: {
    toggleMenu() {
      this.mobileMenuOpen = !this.mobileMenuOpen
    }
  }
}
</script>

<style scoped>
/* 导航栏的样式已经在base.css中定义为工具类 */
</style>